📒 Notes for Lecture 09: ID vs Class & CSS Selectors
-
ID Selector (
#):- Unique identifier for a single element on the page.
- Syntax in HTML:
<div id="firstdiv">…</div> - Syntax in CSS:
#firstdiv { background-color: antiquewhite; }
-
Class Selector (
.):- Can be applied to multiple elements.
- Syntax in HTML:
<div class="red">…</div> - Syntax in CSS:
.red { color: red; border: 5px solid purple; }
-
Multiple Classes:
- Assign more than one class by separating with spaces:
<div id="thirddiv" class="black bg-yellow">…</div> - Here,
.blackand.bg-yellowboth apply to the same element.
- Assign more than one class by separating with spaces:
-
CSS Targeting:
- To style by ID, prefix with
#(e.g.,#seconddiv { background-color: green; }). - To style by class, prefix with
.(e.g.,.bg-green { background-color: aqua; }).
- To style by ID, prefix with
-
HTML Anchor to ID:
- You can link to a specific element by its ID:
<a href="#firstdiv">Go to First Div</a>. - When clicked, the page scrolls directly to the element with
id="firstdiv".
- You can link to a specific element by its ID:
-
Key Takeaways:
- Use IDs when you need to uniquely identify one element.
- Use classes when you want to share styles across multiple elements.
Hinglish: Lecture 09 mein humne IDs aur classes ka difference dekha.
#firstdiv ek unique ID hai jo sirf ek element ko target karta hai, jabki
.red class multiple elements pe apply ho sakti hai.
Agar ek element par do classes lagani hain (jaise class="black bg-yellow"),
toh dono CSS rules apply ho jaate hain. IDs # se target karte hain
aur classes . se.
💻 Live Code Preview
If the iframe doesn’t load, click here to open Lecture 09 Demo in a new tab.